<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<jsp:include page="/WEB-INF/views/head.jsp" />
<script type="text/javascript">
	$(function(){
		$("#skin-pan a.btn").click(function(){
			parent.$("#skin-link")[0].href = this.rel;
		});
	});
</script>
</head>
<body>
	<div class="well" id="skin-pan">
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#5DB2FF;" rel="${ctx}/static/beyond/css/skins/blue.min.css">1</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#2dc3e8;" rel="${ctx}/static/beyond/css/skins/azure.min.css">2</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#03B3B2;" rel="${ctx}/static/beyond/css/skins/teal.min.css">3</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#53a93f;" rel="${ctx}/static/beyond/css/skins/green.min.css">4</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#FF8F32;" rel="${ctx}/static/beyond/css/skins/orange.min.css">5</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#cc324b;" rel="${ctx}/static/beyond/css/skins/pink.min.css">6</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#AC193D;" rel="${ctx}/static/beyond/css/skins/darkred.min.css">7</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#8C0095;" rel="${ctx}/static/beyond/css/skins/purple.min.css">8</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#0072C6;" rel="${ctx}/static/beyond/css/skins/darkblue.min.css">9</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#585858;" rel="${ctx}/static/beyond/css/skins/gray.min.css">10</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#474544;" rel="${ctx}/static/beyond/css/skins/black.min.css">11</a>
		<a class="btn text-white" href="javascript:void(0);" style="background-color:#001940;" rel="${ctx}/static/beyond/css/skins/deepblue.min.css">12</a>
	</div>
	<div class="alert alert-danger fade in">
		<button class="close" data-dismiss="alert">×</button>
		<i class="fa-fw fa fa-times"></i>
		<strong>操作失败</strong>
	</div>
	<div class="alert alert-success fade in">
		<button class="close" data-dismiss="alert">×</button>
		<i class="fa-fw fa fa-check"></i>
		<strong>操作成功</strong>
	</div>
	<h5 class="row-title">
		<i class="typcn typcn-th-small"></i>
		Simple Tables
	</h5>
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="well with-header  with-footer">
				<div class="header bg-blue">Simple Table With Hover</div>
				<table class="table table-hover">
					<thead class="bordered-darkorange">
						<tr>
							<th>#</th>
							<th>Name</th>
							<th>Family</th>
							<th>Username</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>Steve</td>
							<td>Jobs</td>
							<td>steve</td>
						</tr>
						<tr>
							<td>2</td>
							<td>Bill</td>
							<td>Gates</td>
							<td>billy</td>
						</tr>
						<tr>
							<td>3</td>
							<td>Mark</td>
							<td>Zuckerberg</td>
							<td>markz</td>
						</tr>
						<tr>
							<td>4</td>
							<td>Marissa</td>
							<td>Mayer</td>
							<td>marim</td>
						</tr>
					</tbody>
				</table>

				<div class="footer">
					<code>class="table table-hover"</code>
				</div>
			</div>

		</div>
		<div class="col-xs-12 col-md-6">
			<div class="well with-header  with-footer">
				<div class="header bg-darkorange">Condensed Table</div>
				<table class="table table-hover table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th>#</th>
							<th>Name</th>
							<th>Family</th>
							<th>Username</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>Steve</td>
							<td>Jobs</td>
							<td>steve</td>
						</tr>
						<tr>
							<td>2</td>
							<td>Bill</td>
							<td>Gates</td>
							<td>billy</td>
						</tr>
						<tr>
							<td>3</td>
							<td>Mark</td>
							<td>Zuckerberg</td>
							<td>markz</td>
						</tr>
						<tr>
							<td>4</td>
							<td>Marissa</td>
							<td>Mayer</td>
							<td>marim</td>
						</tr>
					</tbody>
				</table>

				<div class="footer">
					<code>class="table table-condensed"</code>
				</div>
			</div>
		</div>
	</div>
	<div class="horizontal-space"></div>
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="well with-header with-footer">
				<div class="header bg-warning">Bordered Table</div>
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>#</th>
							<th>Name</th>
							<th>Family</th>
							<th>Username</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>Steve</td>
							<td>Jobs</td>
							<td>steve</td>
						</tr>
						<tr>
							<td>2</td>
							<td>Bill</td>
							<td>Gates</td>
							<td>billy</td>
						</tr>
						<tr>
							<td>3</td>
							<td>Mark</td>
							<td>Zuckerberg</td>
							<td>markz</td>
						</tr>
						<tr>
							<td>4</td>
							<td>Marissa</td>
							<td>Mayer</td>
							<td>marim</td>
						</tr>
					</tbody>
				</table>
				<div class="footer">
					<code>class="table table-bordered"</code>
				</div>
			</div>

		</div>
		<div class="col-xs-12 col-md-6">
			<div class="well with-header with-footer">
				<div class="header bg-palegreen">Stripped Table</div>
				<table class="table table-hover table-striped table-bordered">
					<thead class="bordered-blueberry">
						<tr>
							<th>#</th>
							<th>Name</th>
							<th>Family</th>
							<th>Username</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>Steve</td>
							<td>Jobs</td>
							<td>steve</td>
						</tr>
						<tr>
							<td>2</td>
							<td>Bill</td>
							<td>Gates</td>
							<td>billy</td>
						</tr>
						<tr>
							<td>3</td>
							<td>Mark</td>
							<td>Zuckerberg</td>
							<td>markz</td>
						</tr>
						<tr>
							<td>4</td>
							<td>Marissa</td>
							<td>Mayer</td>
							<td>marim</td>
						</tr>
					</tbody>
				</table>

				<div class="footer">
					<code>class="table table-striped"</code>
				</div>
			</div>
		</div>
	</div>
	<h5 class="row-title">
		<i class="typcn typcn-tag"></i>
		Contextual Tables
	</h5>
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="well with-header with-footer">
				<div class="header bordered-yellow">Contextual Rows</div>
				<table class="table table-hover">
					<thead>
						<tr>
							<th>#</th>
							<th>Class Name</th>
							<th>Column</th>
							<th>Column</th>
							<th>Column</th>
						</tr>
					</thead>
					<tbody>

						<tr class="active">
							<td>1</td>
							<td>active</td>
							<td>Column heading</td>
							<td>Column heading</td>
							<td>Column heading</td>
						</tr>

						<tr class="success">
							<td>2</td>
							<td>success</td>
							<td>Column heading</td>
							<td>Column heading</td>
							<td>Column heading</td>
						</tr>

						<tr class="warning">
							<td>3</td>
							<td>warning</td>
							<td>Column heading</td>
							<td>Column heading</td>
							<td>Column heading</td>
						</tr>

						<tr class="danger">
							<td>4</td>
							<td>danger</td>
							<td>Column heading</td>
							<td>Column heading</td>
							<td>Column heading</td>
						</tr>

					</tbody>
				</table>

				<div class="footer">
					<code>< tr class="active/success/danger/warning" ></code>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-6">
			<div class="well with-header with-footer">
				<div class="header bordered-sky">Contextual Columns</div>
				<table class="table table-bordered table-hover">
					<thead>
						<tr>
							<th>#</th>
							<th>Column</th>
							<th>Column</th>
							<th>Column</th>
							<th>Column</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>1</td>
							<td>active</td>
							<td>success</td>
							<td>warning</td>
							<td class="danger">danger</td>
						</tr>
						<tr>
							<td>2</td>
							<td class="active">active</td>
							<td>success</td>
							<td>warning</td>
							<td>danger</td>
						</tr>
						<tr>
							<td>3</td>
							<td>active</td>
							<td>success</td>
							<td class="warning">warning</td>
							<td>danger</td>
						</tr>
						<tr>
							<td>4</td>
							<td>active</td>
							<td class="success">success</td>
							<td>warning</td>
							<td>danger</td>
						</tr>
					</tbody>
				</table>
				<div class="footer">
					<code>< td class="active/success/danger/warning" ></code>
				</div>
			</div>
		</div>
	</div>
	<h5 class="row-title">
		<i class="typcn typcn-arrow-minimise"></i>
		Responsive Tables
	</h5>
	<div class="row">
		<div class="col-xs-12 col-md-6">
			<div class="well with-header with-footer">
				<div class="header bordered-pink">Responsive Table</div>
				<table class="table table-striped table-bordered table-hover">
					<thead>
						<tr>
							<th>
								<i class="fa fa-briefcase"></i>
								Company
							</th>
							<th class="hidden-xs">
								<i class="fa fa-user"></i>
								Contact
							</th>
							<th>
								<i class="fa fa-shopping-cart"></i>
								Total
							</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>
								<a href="#">RedBull</a>
							</td>
							<td class="hidden-xs">Mike Nilson</td>
							<td>2560.60$</td>
							<td>
								<a href="#" class="btn btn-default btn-xs purple">
									<i class="fa fa-edit"></i>
									Edit
								</a>
							</td>
						</tr>
						<tr>
							<td>
								<a href="#">Google</a>
							</td>
							<td class="hidden-xs">Adam Larson</td>
							<td>560.60$</td>
							<td>
								<a href="#" class="btn btn-default btn-xs black">
									<i class="fa fa-trash-o"></i>
									Delete
								</a>
							</td>
						</tr>
						<tr>
							<td>
								<a href="#">Apple</a>
							</td>
							<td class="hidden-xs">Daniel Kim</td>
							<td>3460.60$</td>
							<td>
								<a href="#" class="btn btn-default btn-xs purple">
									<i class="fa fa-edit"></i>
									Edit
								</a>
							</td>
						</tr>
						<tr>
							<td>
								<a href="#">Microsoft</a>
							</td>
							<td class="hidden-xs">Nick</td>
							<td>2560.60$</td>
							<td>
								<a href="#" class="btn btn-default btn-xs blue">
									<i class="fa fa-share"></i>
									Share
								</a>
							</td>
						</tr>
					</tbody>
				</table>

				<div class="footer">
					<code>< th class="hidden-xs" ></code>
				</div>
			</div>
		</div>
		<div class="col-xs-12 col-md-6">
			<div class="well with-header with-footer">
				<div class="header bordered-success">Scrollable Table</div>
				<div class="table-scrollable">
					<table class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th scope="col" style="width:450px !important">Column header 1</th>
								<th scope="col">Column header 2</th>
								<th scope="col">Column header 3</th>
								<th scope="col">Column header 4</th>
								<th scope="col">Column header 5</th>
								<th scope="col">Column header 6</th>
								<th scope="col">Column header 7</th>
								<th scope="col">Column header 8</th>
								<th scope="col">Column header 9</th>
								<th scope="col">Column header 10</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
							</tr>
							<tr>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
							</tr>
							<tr>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
							</tr>
							<tr>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
								<td>Table data</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="footer">
					<code>< div class="table-scrollable" ></code>
				</div>
			</div>

		</div>
	</div>
	<div class="row">
		<div class="col-xs-12 col-md-12">
			<div class="widget">
				<div class="widget-header  with-footer">
					<span class="widget-caption">Responsive Flip Scroll Tables</span>
					<div class="widget-buttons">
						<a href="#" data-toggle="maximize">
							<i class="fa fa-expand"></i>
						</a>
						<a href="#" data-toggle="collapse">
							<i class="fa fa-minus"></i>
						</a>
						<a href="#" data-toggle="dispose">
							<i class="fa fa-times"></i>
						</a>
					</div>
				</div>
				<div class="widget-body">
					<div class="alert alert-info fade in alert-radius-bordered alert-shadowed">
						<button class="close" data-dismiss="alert">×</button>
						<i class="fa-fw fa fa-info"></i>

						<strong>Flip Scroll Table:</strong>
						Flips between horizontal and vertical scrolls according to page width
					</div>
					<div class="flip-scroll">
						<table class="table table-bordered table-striped table-condensed flip-content">
							<thead class="flip-content bordered-palegreen">
								<tr>
									<th>Code</th>
									<th>Company</th>
									<th class="numeric">Price</th>
									<th class="numeric">Change</th>
									<th class="numeric">Change %</th>
									<th class="numeric">Open</th>
									<th class="numeric">High</th>
									<th class="numeric">Low</th>
									<th class="numeric">Volume</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>AAC</td>
									<td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
									<td class="numeric">$1.38</td>
									<td class="numeric">-0.01</td>
									<td class="numeric">-0.36%</td>
									<td class="numeric">$1.39</td>
									<td class="numeric">$1.39</td>
									<td class="numeric">$1.38</td>
									<td class="numeric">9,395</td>
								</tr>
								<tr>
									<td>AAD</td>
									<td>ARDENT LEISURE GROUP</td>
									<td class="numeric">$1.15</td>
									<td class="numeric">+0.02</td>
									<td class="numeric">1.32%</td>
									<td class="numeric">$1.14</td>
									<td class="numeric">$1.15</td>
									<td class="numeric">$1.13</td>
									<td class="numeric">56,431</td>
								</tr>
								<tr>
									<td>AAX</td>
									<td>AUSENCO LIMITED</td>
									<td class="numeric">$4.00</td>
									<td class="numeric">-0.04</td>
									<td class="numeric">-0.99%</td>
									<td class="numeric">$4.01</td>
									<td class="numeric">$4.05</td>
									<td class="numeric">$4.00</td>
									<td class="numeric">90,641</td>
								</tr>
								<tr>
									<td>ABC</td>
									<td>ADELAIDE BRIGHTON LIMITED</td>
									<td class="numeric">$3.00</td>
									<td class="numeric">+0.06</td>
									<td class="numeric">2.04%</td>
									<td class="numeric">$2.98</td>
									<td class="numeric">$3.00</td>
									<td class="numeric">$2.96</td>
									<td class="numeric">862,518</td>
								</tr>
								<tr>
									<td>ABP</td>
									<td>ABACUS PROPERTY GROUP</td>
									<td class="numeric">$1.91</td>
									<td class="numeric">0.00</td>
									<td class="numeric">0.00%</td>
									<td class="numeric">$1.92</td>
									<td class="numeric">$1.93</td>
									<td class="numeric">$1.90</td>
									<td class="numeric">595,701</td>
								</tr>
								<tr>
									<td>ABY</td>
									<td>ADITYA BIRLA MINERALS LIMITED</td>
									<td class="numeric">$0.77</td>
									<td class="numeric">+0.02</td>
									<td class="numeric">2.00%</td>
									<td class="numeric">$0.76</td>
									<td class="numeric">$0.77</td>
									<td class="numeric">$0.76</td>
									<td class="numeric">54,567</td>
								</tr>
								<tr>
									<td>ACR</td>
									<td>ACRUX LIMITED</td>
									<td class="numeric">$3.71</td>
									<td class="numeric">+0.01</td>
									<td class="numeric">0.14%</td>
									<td class="numeric">$3.70</td>
									<td class="numeric">$3.72</td>
									<td class="numeric">$3.68</td>
									<td class="numeric">191,373</td>
								</tr>
								<tr>
									<td>ADU</td>
									<td>ADAMUS RESOURCES LIMITED</td>
									<td class="numeric">$0.72</td>
									<td class="numeric">0.00</td>
									<td class="numeric">0.00%</td>
									<td class="numeric">$0.73</td>
									<td class="numeric">$0.74</td>
									<td class="numeric">$0.72</td>
									<td class="numeric">8,602,291</td>
								</tr>
								<tr>
									<td>AGG</td>
									<td>ANGLOGOLD ASHANTI LIMITED</td>
									<td class="numeric">$7.81</td>
									<td class="numeric">-0.22</td>
									<td class="numeric">-2.74%</td>
									<td class="numeric">$7.82</td>
									<td class="numeric">$7.82</td>
									<td class="numeric">$7.81</td>
									<td class="numeric">148</td>
								</tr>
								<tr>
									<td>AGK</td>
									<td>AGL ENERGY LIMITED</td>
									<td class="numeric">$13.82</td>
									<td class="numeric">+0.02</td>
									<td class="numeric">0.14%</td>
									<td class="numeric">$13.83</td>
									<td class="numeric">$13.83</td>
									<td class="numeric">$13.67</td>
									<td class="numeric">846,403</td>
								</tr>
								<tr>
									<td>AGO</td>
									<td>ATLAS IRON LIMITED</td>
									<td class="numeric">$3.17</td>
									<td class="numeric">-0.02</td>
									<td class="numeric">-0.47%</td>
									<td class="numeric">$3.11</td>
									<td class="numeric">$3.22</td>
									<td class="numeric">$3.10</td>
									<td class="numeric">5,416,303</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>

	<jsp:include page="/WEB-INF/views/script.jsp" />
</body>
</html>
